<style>
</style>
<template>
    <div class="contract-close-detial-overpayment">
        <Form ref="formData" :model="formData" :rules="formRules" :label-width="110">
            <Row>
                <!-- 差额/溢缴款金额 -->
                <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="溢缴款" prop="amount">
                        <Row>
                            <Col span="17">
                                <Input type="text" v-model="formData.amount" disabled/>
                            </Col>
                            <Col span="6" offset="1">
                                <Button type="primary" @click="openModal">详情</Button>
                            </Col>
                        </Row>
                    </FormItem>
                </Col>

                <Col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="处理方式" prop="processMode">
                        <Select v-model="formData.processMode" clearable :disabled="isApprove||Obj.readOnly">
                            <Option
                                v-for="(item,index) in dataDict.processModeDict"
                                :key="index"
                                :value="item.value"
                            >{{item.title}}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <!--  退款银行/收款银行 -->
                <Col v-if="formData.processMode!=='reduction'" :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="退款银行" prop="bankName">
                        <Select v-model="formData.bankName" clearable :disabled="isApprove||Obj.readOnly">
                            <Option
                                v-for="(item,index) in dataDict.bankCodeDict"
                                :key="index"
                                :value="item.value"
                            >{{item.title}}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <!-- 收款/付款方式 -->
                <Col v-if="formData.processMode!=='reduction'" :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="付款方式" prop="termsPayment">
                        <Input type="text" value="线下" disabled/>
                    </FormItem>
                </Col>
                <!-- 支付至/支付人 -->
                <Col v-if="formData.processMode!=='reduction'" :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="支付至" prop="payer">
                        <Input type="text" v-model="formData.payer" :disabled="isApprove||Obj.readOnly"/>
                    </FormItem>
                </Col>

                <Col v-if="formData.processMode!=='reduction'" :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="退款账户" prop="refundAccount">
                        <Input type="text" v-model="formData.refundAccount" :disabled="isApprove||Obj.readOnly"/>
                    </FormItem>
                </Col>
                <Col v-if="formData.processMode!=='reduction'" :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="分支行" prop="branchBank">
                        <Input type="text" v-model="formData.branchBank" :disabled="isApprove||Obj.readOnly"/>
                    </FormItem>
                </Col>
                <!-- 无数据 -->
                <Col v-if="formData.processMode!=='reduction'" :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">
                    <FormItem label="联行号" prop="bankNo">
                        <Input type="text" v-model="formData.bankNo" :disabled="isApprove||Obj.readOnly"/>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </div>
</template>
<script>
    import {findcontractOverpayment} from "_p/basic/api/contract/contract-close/index";
    import {verifyErrorToView} from "_p/basic/assets/contract/js/utils";

    export default {
        props: {
            dataDict: {
                type: Object,
                required: true
            },
            isApprove: {
                type: Boolean,
                require: true
            },
            //对象参数包含：合同号码、角色类型
            Obj: {
                type: Object,
                required: true
            },
            pageParams: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                formRules: {
                    processMode: [
                        {required: true, message: "请选择一项", trigger: "change"}
                    ],
                    bankName: [
                        {required: true, message: "请选择一项", trigger: "change"}
                    ],
                    payer: [
                        {required: true, message: "请输入支付人", trigger: "blur"}
                    ],
                    refundAccount: [
                        {required: true, message: "请输入退款账户", trigger: "blur"}
                    ],
                    branchBank: [
                        {required: true, message: "请输入分支行", trigger: "blur"}
                    ],
                    bankNo: [
                        {required: true, message: "请输入联行号", trigger: "blur"}
                    ]
                },
                formData: {
                    termsPayment: "线下"
                }
            };
        },
        created() {
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.getDetial(this.pageParams.contractNo);
            },
            getDetial(contractNo) {
                findcontractOverpayment(contractNo).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.formData = res.data;
                    }
                })
                    .catch(e => {
                        this.$Message.error("获取详情错误!");
                        console.log(e);
                    });
            },
            formValidate(funcName, data) {
                if (!funcName) return;

                this.$refs.formData.validate(valid => {
                    if (valid) {
                        this.Obj.type = null;
                        let d = Object.assign({}, data, this.formData, this.Obj);
                        d.termsPayment = "线下";
                        this.$emit(funcName, d);
                    } else {
                        this.$Message.error("必填项不能为空!");
                        this.$emit("closeSpin");
                        verifyErrorToView(this.$refs.formData.fields);
                    }
                });
            },
            openModal() {
                this.$emit("showModal", "overpaymentModal");
            }
        },
        computed: {}
    };
</script>
